<template>
	<div class="wrap">
		<h2 class="title">卫生检查管理</h2>
		<el-row :gutter="10">
			<el-col :span="3">
				<span>楼栋：</span>
				<el-input v-model="build" />
			</el-col>
			<el-col :span="1">
				<el-button class="btn" @click="submitSearch">
					<el-icon>
						<Search />
					</el-icon>
					查询</el-button
				>
			</el-col>
		</el-row>
		<div class="table">
			<el-table
				:data="sanCheck"
				:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
				:row-style="tableRowClassName"
				
				:fit="true">
				<el-table-column prop="buildId" label="楼栋" width="180" />
				<el-table-column prop="dorNumber" label="寝室号" width="180" />
				<el-table-column prop="checkPerson" label="检查人员" />
	
			</el-table>
		</div>

		<!-- 分页 -->
		<el-row class="pagination">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="pageSizes"
				small="small"
				:background="true"
				layout="total, sizes, prev, pager, next"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</el-row>
	</div>
</template>

<script setup>
import { Search } from '@element-plus/icons'
import { ref, reactive, onMounted } from 'vue'
import { getAllCheckInfo, searchByBuildId } from '@/utils/axios/master'
import { debounce } from '@/utils/tools'
import { getHygAll } from '@/utils/axios/getTotal'


const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = reactive([10, 20, 30])
const sanCheck = ref([])
const build = ref()

// 卫生记录总数
const total=ref(0)
// 查询结果
const submitSearch = debounce(async () => {
	currentPage.value = 1
	let data = []
	build.value
		? ({ data } = await searchByBuildId({ currentPage, buildId: build.value, pageSize }))
		: ({ data } = await getAllCheckInfo({ currentPage: 1, pageSize: 10 }))
	sanCheck.value = data
})

const handleSizeChange = async (val) => {
	let { data } = await getAllCheckInfo({ currentPage:currentPage.value, pageSize: val })
	sanCheck.value = data
}
const handleCurrentChange = async (val) => {
	let { data } = await getAllCheckInfo({ currentPage: val, pageSize: pageSize.value })
	sanCheck.value = data
}

// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}

// 加载数据
onMounted(async () => {
	let { data } = await getAllCheckInfo({ currentPage: 1, pageSize: 10 })
	let res=await getHygAll()
	total.value=res.data
	sanCheck.value = data
})
</script>

<style scoped lang="scss">
.el-input {
	width: 100px;
}
.el-row {
	margin-bottom: 10px;
}
.btn {
	background: rgb(0, 202, 237);
	color: #ffff;
}

</style>
